<template>
  <div class="demo-view">
    <h1>📡 Vue 3 父子通信完整演示</h1>
    <p>下面两个示例展示了：事件传递 + v-model 双向绑定</p>

    <hr />

    <!-- 示例 1：事件向上传递 -->
    <ParentDemo />

    <hr />

    <!-- 示例 2：v-model 双向绑定 -->
    <ParentWithVModel />
  </div>
</template>

<script setup>
import ParentDemo from '@/components/ParentDemo.vue'
import ParentWithVModel from '@/components/ParentWithVModel.vue'
</script>

<style scoped>
.demo-view {
  padding: 30px;
  max-width: 800px;
  margin: 0 auto;
}
.demo-view h1 {
  color: #333;
  margin-bottom: 10px;
}
.demo-view p {
  color: #666;
  margin-bottom: 30px;
}
hr {
  margin: 40px 0;
  border: none;
  border-top: 1px solid #eee;
}
</style>
